<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<body>

    <div id="app">
        <li v-for=" (v,k) in comments" >
            {{v.content}} <button v-on:click="remove(k)">删除</button>
        </li>
        <textarea v-model="current_content" cols="30" rows="10"></textarea>
        <button v-on:click="push('end')">发表到后面</button>
        <br>
        <button v-on:click="push('pre')">发表到前面</button>
        <br>
        <button v-on:click="del('end')">删除最后一条</button>
        <br>
        <button v-on:click="del('first')">删除最前一条</button>
    </div>

<script>
    var app=new Vue({
        el:'#app',
        data: {
            current_content:'',
            comments:[
                {content:'前端申'},
                {content:'后端君'}
            ]
        },
        methods:{
            remove(k){
              this.comments.splice(k,1);
            },
            push(type){
                //初始化变量
                var content={content:this.current_content}
                switch(type){
                    case 'end':
                        this.comments.push(content);
                        this.current_content='';
                        break;
                    case 'pre':
                        this.comments.unshift(content);
                        this.current_content='';
                        break;
                }

            },
            del(type){
                switch(type){
                    case 'end' :
                        this.comments.pop();
                        break;
                    case 'first':
                        this.comments.shift();
                        break;
                }
            }

        }
    });

</script>
</body>
</html>